<template>
  <div class='header'>
    <div class="container">
      <div>
        <el-icon size="20px" style="margin:0 20px;">
          <router-link to="/userinfo">
            <back />
          </router-link>
        </el-icon>
      </div>

      <div>个人信息</div>
    </div>
  </div>
  <div class='form'>
    <el-button type="success" @click="update">确认修改</el-button>
    <el-form :model="form" label-width="120px">
      <el-form-item label="头像">
        <img src="../assets/logo.svg" alt="User Avatar" style="width: 50px; height: 50px;" />
        <el-form-item label="账号">
          <el-input v-if="!isEditing" v-model="form.phone" placeholder="" readonly style="width: auto;" />
          <!-- <el-button type="success" @click="update">确认修改</el-button> -->
          <!-- <el-button type="primary" @click="huixian( form.value.id)">点击修改信息</el-button> -->
        </el-form-item>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-if="!isEditing" v-model="form.name" placeholder="" style="width: auto;" />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-if="!isEditing" v-model="form.username" placeholder="" style="width: auto;" />
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-if="!isEditing" v-model="form.password" type="password" placeholder="" style="width: auto;" />
      </el-form-item>
      <el-form-item label="车牌号">
        <el-input v-if="!isEditing" v-model="form.vehicleLicense" placeholder="" style="width: auto;" />
      </el-form-item>

      <el-form-item label="邮箱">
        <el-input v-if="!isEditing" v-model="form.email" placeholder="" style="width: auto;" />
      </el-form-item>
      <el-form-item label="最大可载人数">
        <el-input v-if="!isEditing" v-model="form.seatCapacity" placeholder="" style="width: auto;" />
      </el-form-item>


    </el-form>
  </div>

</template>

<script setup>
import { ref } from 'vue'
import { debounce } from 'lodash';
import request from "@/utils/request";
import { useRouter } from 'vue-router';

const userInfo = ref({});
// form表单
const form = ref({
  email: "",
  id: "",
  name: "",
  password: "",
  phone: "",
  seatCapacity: "",
  username: "",
  vehicleLicense: ""


})

//调用登录获取信息
const add = () => {
  form.value = userInfo.value
  console.log(userInfo.value.id)
}
//修改信息回显
const huixian = (id) => {
  request.get(`/vehicle/vehicleById${id}`)
    .then(response => response.json())
    .then(result => {
      if (result.success) {
        from.value = result.message
        console.log(result.message)
      }
    }
    )
}


//确认修改按钮
const update = () => {
  request.post('/vehicle/vehicle/vehicleById',
    form.value
  )
    .then(result => {
      if (result.success == true) {
        result.data = form.value
        console.log(result.message)
        ElNotification({
          title: 'Success',
          message: '修改信息成功',
          type: 'success',
        })
      }
    }
    )
}





//获取本地用户信息
const parseUserInfo = () => {
  const originalString = localStorage.getItem("user")
  var newStr = originalString.substring(30, originalString.length - 1); // 从索引12开始，截取到字符串末尾的前一个字符，即去掉 "]"
  // 去掉字符串两侧的空格，并替换其中的等号和单引号为对应的JSON字符
  var newStr = newStr.replace(/=/g, ':').replace(/'/g, '"');
  // 在字符串开头和结尾添加大括号，使其成为一个完整的JSON对象
  let pairs = newStr.split(", ");
  let jsonObj = {};
  for (let i = 0; i < pairs.length; i++) {
    let keyValuePair = pairs[i].split(":");
    jsonObj[keyValuePair[0]] = keyValuePair[1];
  }
  let jsonStr = JSON.stringify(jsonObj);
  userInfo.value = JSON.parse(jsonStr);

}

parseUserInfo();
add();
// huixian ();

</script> 








<style lang='less' scoped>
.header {
  display: flex;
  justify-content: space-between;
  background-color: #BDDCFF;
  height: 60px;
  line-height: 60px;
  color: #495e77;
  padding: 0 12px;
}

.container {
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.form {
  width: 100%;

  .el-form {
    .el-form-item {
      height: 120px;
      border-bottom: 1px solid #D4D4D4;
      margin: 0;
    }

    :deep(.el-form-item__label) {
      line-height: 120px !important;
    }

  }
}

.btn {
  text-align: center;
  line-height: 100px;
}

.el-radio-button {
  margin-right: 10px;
}
</style>
  